<template>
  <view class="warp need_scroll_top_view">
    <view class="h20"></view>
    <view class="top p33">
      <view class="left">
        付款凭证
      </view>
      <!-- <view class="right">
        打款账户：{{cardNumber || '-'}}
      </view> -->
    </view>
    <view class="up-box border" v-if="img.length == 0" @click="update">
      <block>
        <image src="../../static/image/id.png" class="sm-img"></image>
        <view>上传付款凭证</view>
      </block>
    </view>
    <view class="small-photo p33" v-else>
      <view class="small-photo-box" v-for="(item, index) in img" :key="index">
        <view class="close"><image  :src="$store.state.imgBaseUrl + '/cancel.png'" @click="delectShopImg(index)"></image></view>
        <image :src="item" class="imgWidth" @click="checkImg(index)"></image>
      </view>
      <view class="new-photo-box" v-if="img.length < 5" @click="update">
        <image :src="$store.state.imgBaseUrl + '/id.png'" class="sm-img"></image>
        <view>上传图片</view>
      </view>
      <view class="small-photo-box" v-if="img.length >= 3"></view>
      <view class="small-photo-box" v-if="img.length == 3 && img.length != 4"></view>
    </view>
    <view class="text1 p33">
      注：上传的凭证，用于平台核张使用，请务必保证照片完整且清晰可辨
    </view>
    <view class="p33">
      <view class="uni-textarea">
        <textarea v-model="remark" placeholder-style="color: #999999;fontSize: 12px" @blur="backFixationTop()" placeholder="填写备注（选填）"/>
      </view>
    </view>
    <view class="footer">
      <button type="primary" class="sub-btn cur" plain="true" @click="subInfo">提交审核</button>
    </view>
  </view>
</template>

<script>
import {uploadFile, checkImage} from "@/unit/common.js"
import {parentReceipt, saveInfo, getModify, payAgain, findResult} from "@/service/join/join.service.js"
import {upgrade} from "@/service/upgrade/upgrade.service.js"
import {getJoinStatus} from '../join/common.js' // 获取审核结果的接口
import { scrollToTargetPosition } from '@/mixin/index.mixin.js'
export default {
  mixins: [scrollToTargetPosition],
  data() {
    return {
      img: [],
      type: '',
      imgId: [],
      source: '', // 支付失败后重新提交
      remark: '', // 备注
      allInfo: null,
      cardNumber: null,
      isRecompose: false,
      getUserJoinInfo: null, // 获取存储的信息
      getUserComposeInfo: null ,// 获取被驳回存储的信息
      array: [
        {name: '银行转账', id: '0'},
        {name: '微信', id: '1'},
        {name: '支付宝', id: '2'}
      ],
      info: {
        name: '',
        type: 1,
        number: ''
      }
    };
  },
  onLoad:function(option) {
    this.rank = option.rank;
    this.getDatas(); // 查询对公账号
  },
  mounted() {
    this.initDraw()
  },
  activated () {
    this.initDraw()
  },
  methods: {
    initDraw () {
      this.getUserComposeInfo = uni.getStorageSync('recomposeDatas');
      if (this.getUserComposeInfo) {
        this.isRecompose = true;
        this.recomposeInfo = this.getUserComposeInfo;
        this.rank = this.getUserComposeInfo.rank;
        this.remark = this.getUserComposeInfo.remark || '';
        if (this.getUserComposeInfo.transferImages.length > 0) {
          this.isInfo = true;
          this.getUserComposeInfo.transferImages.forEach((item) => {
            this.img.push(item.url);
            this.imgId.push(item.id)
          })
        }
      }
      if (!this.getUserComposeInfo && !this.rank) {
        findResult({}, res => {
          if (res.status == 0) {
            if (res.data.status != 1) {
              uni.showToast({
                title: '已提交申请',
                icon: 'none',
                duration: 2000,
                success: () => {
                  setTimeout(() => {
                    uni.redirectTo({
                      url: '/pages/upgrade/result'
                    })
                  }, 1000);
                }
              });
            }
          }
        })
      }
    },
    checkImg (index) {
      // 预览图片
      checkImage(this.img, index)
    },
    delectShopImg (i) {
      this.img.splice(i, 1);
      this.imgId.splice(i, 1)
    },
    bindPickerChange: function(e) {
      this.info.type = e.target.value;
    },
    update () { // 上传凭证
      uploadFile({success: (obj) => {
        if (obj.status == 0) {
          this.img.push(obj.data.url);
          this.imgId.push(obj.data.id);
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      }})
    },
    getDatas () {
      parentReceipt({}, (res) => {})
    },
    subInfo () {
      if (this.img.length == 0) {
        uni.showToast({
          title: '请上传付款凭证',
          icon: 'none'
        });
        return false
      }
      let params = {
        // realname: this.allInfo.realname, // 法人名称
        rank: this.rank, // 加盟等级
        transferFileIds: this.imgId.join(','), // 凭证图片id
        appliedType: 2, // 申请类型(1名额添加，2付费加盟，3代上传)
        remark: this.remark,
        onlinePay: 0
      } 
      
      if (!this.isRecompose) {
        this.firstJoin(params); // 初次申请
      } else {
        this.recomposeJoin(params); // 被驳回
      }
    },
    firstJoin (params) {
      upgrade(params, (res) => {
        if (res.status == 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          });
          uni.removeStorage({ // 清除缓存
            key: 'gradeUserInfo',
            success: function (res) {
              uni.redirectTo({ // 审核页
                url: '/pages/upgrade/result'
              })
            }
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    recomposeJoin(params) {
      params['id'] = this.recomposeInfo.joinId
      getModify(params, (res) => {
        if (res.status == 0) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          });
          uni.removeStorageSync('gradeUserInfo');
          uni.removeStorage({ // 清楚缓存
            key: 'recomposeDatas',
            success: function (res) {
              uni.redirectTo({ // 审核页
                url: '/pages/upgrade/result'
              })
            }
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.new-photo-box {
  width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  color: #666666;
  font-size: 24rpx;
  text-align: center;
  border: 1px dashed #E1E1E1;
  border-radius: 16rpx;
  image {
    width: 79rpx;
    height: 79rpx;
    display: block;
    margin: 35rpx auto 29rpx;
  }
}
.small-photo {
  margin: 10rpx 0 30rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  &-box {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    margin-top: 20rpx;
    // background-color: #FAFAFA;
    .close {
      width: 42rpx;
      height: 42rpx;
      position: absolute;
      right: -20rpx;
      top: -20rpx;
      z-index: 1;
    }
  }
}
image {
  width: 100%;
  height: 100%;
}
.h20 {
  height: 20rpx;
  background-color: #FAFAFA;
}
.p33 {
  padding: 0 33rpx;
}
.warp {
  height: calc(100vh - 20rpx);
  background-color: #FFFFFF;
  color: #333333;
  .top {
    padding-top: 42rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666666;
    font-size: 26rpx;
    .left {
      font-size: 36rpx;
      color: #333333;
    }
  }
  .up-box {
    width: 330rpx;
    height: 200rpx;
    color: #666666;
    font-size: 24rpx;
    text-align: center;
    border-radius: 16rpx;
    margin: 31rpx auto 0;
    .sm-img {
      width: 79rpx;
      height: 79rpx;
      display: block;
      margin: 35rpx auto 29rpx;
    }
    &.border {
      border: 1px dashed #E1E1E1;
    }
    .boradius {
      border-radius: 16rpx;
    }
  }
  .text1 {
    color: #333333;
    font-size: 22rpx;
    margin-top: 33rpx;
  }
  .box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30rpx 0;
    font-size: 28rpx;
    border-bottom: 1rpx solid #E1E1E1;
    .name {
      width: 145rpx;
      font-size: 28rpx;
    }
   
    .inpt {
      width: 73%;
      margin-left: 40rpx;
      display: flex;
      justify-content: space-between;
      .uni-list-cell {
        width: 100%;
        font-size: 28rpx;
      }
      .arrow {
        width: 11rpx;
        width: 21rpx;
        background-color: #999999;
      }
      input{
        font-size: 24rpx;
        font-weight:500;
        color: #999999;
      }
    }
    .label {
      font-size: 28rpx;
      color: #333333;
      font-weight:500;
    }
    .line {
      width: 120rpx;
      font-size: 24rpx;
      text-align: right;
    }
  }
  .footer {
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 14rpx 0 20rpx;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 0;
    button {
      height: 70rpx;
      margin: 0 32rpx;
      background-color: #636363;
      font-size: 30rpx;
      line-height: 70rpx;
      color: #ADA697;
      border: none;
      &.cur {
        color: #F6DA99;
        background-color: #434343;
      }
    }
  }
  .uni-textarea {
    margin-top: 55rpx;
    height: 167rpx;
    background: rgba(250,250,250,1);
    border-radius: 10rpx;
    padding: 20rpx 27rpx;
    textarea {
      width: 100%;
      height: 100%;
      font-size: 28rpx;
    }
  }
}
</style>
